Design System

Design System

このノートがあれば、このDigital Gardenに近いサイトを再現できることを目指したメモ。 上のfrontmatter(tokens)はPlaygroundから調整できる値そのもの。ここではPlaygroundが カバーしていない部分(フォント・レイアウト・ナビ構造)も含めて、実装の全体像を記録する。

カラー

• Primitiveは白黒基調に統一(white black gray-50〜900の10段階均等グレースケール)。色付きprimitiveは廃止した(2026-08-13)。Semantic(action.primary/bg/surface/text/muted/border)はPlaygroundでこの中から選ぶかnone/glass特殊値を指定する
• 背景は基本的に無色(__none__)にして、下に敷いた写真(.dg-bg-layer)を透かして見せるのが基本デザイン
• text/muted/borderは白系(white)に寄せ、暗い背景の上に浮かせる前提

タイポグラフィ

• 英字: JetBrains Mono、日本語: IBM Plex Sans JP(Google Fonts、index.htmlでCDN読み込み)
• CSS: font-family: 'JetBrains Mono', 'IBM Plex Sans JP', system-ui, 'Segoe UI', Roboto, sans-serif;
• 基準サイズ/太さはPlaygroundのTypographyタブで調整(--dg-font-size / --dg-font-weight)

スペーシング・角丸

• space.unitを基準に xs=1unit / sm=2unit / md=3unit / lg=4unit を導出(spaceScale())
• radiusはカード・ボタン・入力欄など全体で共通の角丸に使う

ガラス/ぼかし効果(Glassタブ)

写真ヒーローの上のヘッダーや、子ページの背景ぼかしに使う「曇りガラス」表現。

• blur: backdrop-filterのぼかし量
• tint: 暗幕の濃さ(rgba(20,20,24,tint%)を--dg-glass-bgとして使う)
• saturation: 透過部分の彩度(高いほど奥の色が鮮やかに透ける)
• grainScale / grainOpacity / grainType: SVGフラクタルノイズによる粒感(soft/fine/turbulence/film)
• bgBlur: 子ページ(home以外)の背景写真自体のぼかし量。--dg-page-bg-tint(=tintと同じ値)を暗幕として重ね、他のガラス面と明るさを揃えている

レイアウトパターン(コード側、Playground対象外)

• 背景写真: 6_Albumからランダムに1枚選び、.dg-bg-layer(position:fixed、z-index:-1)の中で スマホは90度回転+object-fit:cover、PC(768px以上)は回転無しでそのままcover。切り替え時は new Image()で事前読み込み→2枚を重ねてopacity:0→1(1秒)のクロスフェード
• カード: タイトル(3行clamp)/ map(所属カテゴリ) / 本文抜粋(6行clamp) / 日付、の順で構成 (CardTileDetailed)。高さは中身に応じたauto、文字数からの逆算はしない
• 列組み: スマホ2列・PC7列。CSSのcolumn-widthはSafariで列の先頭がガタつく既知の癖が あるため使わず、JSでsplitIntoColumns()により列を明示的に組んでflexboxで並べる
• Album表示: 画像は<img>の自然な縦横比のまま(切り抜き・グラデーション無し)、単一カラム

ナビゲーション構造

• ヘッダー: ロゴ(Home遷移)+検索(Enterで全画面の検索結果へ)+ハンバーガー
• Home: 1枚目にmin-height:100vhのヒーロー(mapsサブメニューのチップ行)、 スクロールすると2枚目に探索カードグリッド(0_Inboxからランダム30件)
• サブメニュー: 固定フォルダではなく、1_Map/Map_◯◯.md(MOCノート)からの発リンク/被リンクを 集計して動的に生成(wiki/thinking/journal/digital garden/webclip/book + all)。 以前はfrontmatterのmap配列で判定していたが、2026-08-13にMOCノートへの実リンクへ移行した
• ハンバーガー: 右からスライドインするドロワー。中身はvault全体の折りたたみツリー (VaultTree)+ Playground(要ログイン) + Graph + ログイン/ログアウト
• ノート個別ページ: 既定プレビュー表示(Markdown、[[wikilink]]はクリックで遷移、 チェックボックスはクリックでトグル)。「編集する」ボタンでCodeMirror生テキスト編集に切り替え

ノートのfrontmatterスキーマ(2026-08-13〜)

0_Inbox配下のノートは3項目だけのシンプルな形式にしている。角括弧[ ](YAMLの配列)は 一切使わない方針(source: [→](url)のような書き方は[が配列開始と衝突して壊れる事故が 何度も起きたため撤去した)。

---
date: '2026-08-13'
source: "https://example.com/article"
public: true
---

• date: 文字列として必ずクォートする(クォート無しだとYAMLが日付型として自動変換してしまい、 アプリ側のtypeof data.date === 'string'判定とズレる)
• source: 裸のURL文字列のみ。表示側(Editor.tsx)が固定の「→」ラベルを付けてリンクにする。 情報が無ければ空欄(source:)のままでよい
• public: true/false。値が無いノートは未ログイン時に見えない(下記「公開/非公開」参照)
• テーマ分類(旧map配列)はfrontmatterに持たず、1_Map/Map_◯◯.mdへの実リンクで管理する
• このスキーマに収まらない情報(旧tags・type等)は本文の1行目に旧key: valueの形で 書いておく(frontmatterには入れない)

公開/非公開

frontmatterのpublic: trueが無いノートは未ログイン時に一切見えない(バックエンドが optionalAuthで判定しフィルタする)。デザイン装飾扱いのDesign System.mdと6_Album配下は 例外的に常に公開(非公開にする意味が無いため)。public/privateは同じUI・同じAPIを共有し、 見える件数だけが変わる構成(別の公開専用ページは持たない)。

Map_DigitalGarden